@charset "UTF-8";
$basefontsize:16px;
$basefontcolor:#333333;
@import "_reset.scss";
body{
	background: #f1f1f1;
	font-size: 'Weiruanyahei'
}
html,body,#app{
	width: 100%;
	height: 100%;
	position: relative;
}
#app{
	font-family: 'Microsoft Yahei'
}
/*组件库*/
%solid-gray {
    background: #555;
    box-shadow: inset 0 1px rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.2);
}

/*Menu  左侧菜单*/
.menu{
	position: fixed;
	width: 220px;
	height: 100%; 
	left: 0;
	top: 0;
	background: #2f2f2f;
	border-bottom: 1px solid black;
  overflow: hidden;
  z-index: 2000;
  .fa{
	    	margin-right: 6px;
	    	vertical-align:middle;
    }
    .menu-close{
    	position: absolute;
    	right: 0;
    	top: 0;
    	color: #fff;
    }
  /*Menu-logo*/
  .logo{
  	@include flc(18px, 2,#fff,none);
  	padding: 0px 10px;
  }
  /*Menu-菜单*/
  .menu-btn-group{
  	margin-top: 10px;
  	display: flex;
  	justify-content:space-between;
	  flex-wrap:wrap;
	  padding: 0px 10px;
  	.menu-btn{
			flex:  0 1 95px;
			@include flc(14px,44px ,#ddd,center);
	    margin-bottom: 5px;
	    background-color: #222;
	    background: rgba(0,0,0,0.3);
	    text-shadow: none;
	    cursor: pointer;
	    box-shadow: none;
	    border-radius: 3px;
	    font-weight: bold;
	    
  	}
  	.menu-btn.solid-gray {@extend %solid-gray }
  }
  /*Menu-组件*/
  .menu-cpts{
  	.cpts-tit{
  		padding: 0px 10px;
  		@include flc(12px, 2,#ddd,none);
  		font-weight: bold;
  	}
  	.cpt-item,.cpt-add{
			padding: 0px 10px;
  		@include flc(14px, 2,#ddd,none);
  		.fa{color: #ccc;width: 15px;}
  	}
  	.cpt-add{
  		span{
				padding: 4px 10px;
				border-radius: 5px;
	      background-color: #54701c;
			  background-repeat: repeat-x;
		    background-image: -webkit-linear-gradient(top,#718521,#54701c);
		    background-image: linear-gradient(to bottom,#718521,#54701c);
		    color: #fff;
		    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
		    box-shadow: inset 0 1px rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.4);
  		}
  	}
  }
}
.cpts{
	position: fixed;
	width: 220px;
	height: 100%;
	left: 220px;
	top: 0;
	background: #f2f2f2;
	border-bottom: 1px solid black;
  overflow: hidden;
  z-index: 2000;
  display: none;
  padding: 15px;
  .cpts-list{
  	.btn-close{
  		@extend %palt;

  	}
  	.btn-type{
  		display: inline-block;
	    zoom: 1;
	    padding: 6px 9px;
	    position: relative;
	    top: -5px;
  		background-color: #70a800;
	    background-repeat: repeat-x;
	    background-image: -webkit-linear-gradient(top,#93b800,#70a800);
	    background-image: linear-gradient(to bottom,#93b800,#70a800);
	    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#93b800',endColorstr='#70a800',GradientType=0);
	    color: #fff!important;
	    text-shadow: 0 1px 1px rgba(0,0,0,0.5)!important;
			margin-bottom: 10px;
  	}
  	.btn-type.selected:after{
  		content: ' ';
	    display: block;
	    position: absolute;
	    top: 100%;
	    left: 50%;
	    margin-left: -8px;
	    border: 8px solid transparent;
	    border-top: 8px solid #70a800;
	    border-bottom-width: 0;
  	}
  	 .cpts-list-items li{
			.tit{
				@include flc(14px, 2,#614b83,left);
				border-bottom: 1px solid #614b83;
			}
			.pic{
				img{width: 100%;}
			}
  	}
  }
 
}
.cpts.visible{
	display: block;

}
/*------------------*/
.section{
	.btn{
		padding: 4px 10px;
		background: #555;
		border: 1px solid rgba(0,0,0,0.4);
    box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
    @include flc(14px,2 ,#fff,center);
	}
}
/*头图组件*/
.banner{
	background: #ddd;
	height: 600px;
	position: relative;
	.btn-height,.btn-back{
		width: 110px;
		top: 10px;
		opacity: 0;
		border-radius: 10px;
		.btn-txt{display: block;}
		.ipt-height{
			display: none;
			width: 100px;
			@include flc(14px, 30px,#fff,center);
			border: 1px solid #ccc;
		}
		.ipt-height.visible{
			display: block;
		}
		&.visible{opacity: 1}
	}
	.btn-height{
		@extend %part;
		right: 150px;
		.btn-height-wrap{
		}
	}
	.btn-back{
		@extend %part;
		right: 10px;
		overflow: visible;
		.btn-image,.btn-color{
			float: left;
			background: #fff;
			margin-right: 5px;
			color: #3899ec;
			padding: 1px 3px;
			border-radius: 5px;
		}
	}

	.sketch{
		position: absolute;
		top: 30px;
		left: 120px;
		}
	
}

/*图片框*/
.image-modal{
	background:rgba(0,0,0,.5);
	.wrap{@extend %clf;}
	.wrap .list{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 340px;
		padding: 20px 30px;
		li{
			flex: 0  0 160px;
			img{
				width: 100%;
			}
		}
	}
}

.btn-allsite{
	position: fixed;
	left: 50%;
	z-index: 4000;
}
.edit-border{
	border-top: 1px dashed red;
	margin-top: -1px;
	margin-bottom: -1px;
	border-bottom: 1px dashed red;
}
.cpt-drawer{
	overflow: hidden;
}
.color-picker{
	display: block;
}
.widgetMenu{
	position: absolute;
	left: 0;
	top: 0;
}

.menu-widget{
	position: fixed;
	width: 250px;
	height: auto;
	left: 200;
	top: 60px;
	z-index: 1100;
	background: #fff;
	box-shadow: 0 0 18px 0 rgba(22, 45, 61, 0.27);
  border-radius: 10px;
  .menu-widget-group{
  	padding: 0px 10px;
  	margin: 0 10px;
  	border-bottom: 1px solid #ccc;
	}
	.menu-widget-column{
  	line-height: 40px;
  	&.header{
			width: 100%;
			font-size: 14px;
			.ipt-fontsize{
				width: 40px;
				border: 1px solid #ccc;
				line-height: 30px;
				text-align: center;
			}
		}
	}
	.label{
		padding: 5px 10px;
		font-size: 16px;
	}
	.font-styles,.font-align{
		font-size: 24px;
		line-height: 50px;
		span{
			padding: 0px 15px;
			border-radius: 5px;
			&:hover{background: rgba(56, 153, 236,.4);};
		}
		.checked{
			background: #3899ec;
		}
	}
	.font-weight{font-weight: bold;}
	.font-under{text-decoration: underline;}
	.font-italic{font-style: italic;}
	.font-color{color: red}
	.font-wryh{font-family: 'Microsoft Yahei'}
	.font-SimSun{font-family: 'SimSun'}
	.font-SimHei{font-family: 'SimHei'}
}
.menu-widget-layout{
	width: 250px;
	left: 1100px;
	
}
.widget-wrap{

}













